<template>
	<view class="identification">
		<view>
			<view class="info">
				<view style="height: 386rpx;overflow: hidden">
					<image :src="IMGLink+'/my/welcome.png'" mode="widthFix" style="width: 652rpx;"></image>
				</view>
				<view class="base_box">
					<view class="rows" v-for="(i,j) in infoList" :key='j'>
						<view class="name">
							{{i.name}}
						</view>
						<input type="text" v-model="i.value" :placeholder="i.placeholder" class="ipt"
							:disabled='i.disabled' placeholder-style="color:#C7C7C7;" />
					</view>
				</view>
			</view>
			<view class="finish_box">
				<view class="tip">
					* 根据相关法规，个人信息将用于拍卖、提现、电子签约等
					渠道、认证，不涉及金钱账号信息，信息将严格保密。
				</view>
				<view class="btn" style="margin-top: 126rpx;" @click="goBack">
					认证成功
				</view>
				<view class="btn" style="background: #3E3E3E;" @click="toEmit" v-show='againShow'>
					重新认证
				</view>
				<view class="tip">
					* 每人只有一次修改资料机会，请慎重操作。
				</view>
			</view>
		</view>
		<uni-popup ref="resultpop" type="center" :mask-click="false" :animation="false">
			<view class="result_box" :style="resultBg">
				<view class="text">
					{{resultText}}
				</view>
				<view class="btn result_btn" @click="closeBtn">
					{{resultTextBtn}}
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import welcome from './welcome.vue'
	import {
		luhnCheck,
		idCard,
		checkMobile
	} from './js/index.js'
	import {
		upload,
		fourelements,
		authenticationInfo,
		editfourelements
	} from '@/api/my/my.js'
	import copyFunc from "@/utils/userCommon.js";
	export default {
		data() {
			return {
				resultBg: '',
				resultText: '认证成功',
				resultTextBtn: '确定',
				IMGLink: this.IMGLink,
				infoList: [{
					name: '姓名',
					value: '',
					placeholder: '请输入您的姓名',
					disabled: false
				}, {
					name: '身份证号',
					value: '',
					placeholder: '请输入身份证号',
					disabled: false
				}, {
					name: '银行卡号',
					value: '',
					placeholder: '请输入银行卡储蓄卡号',
					disabled: false
				}, {
					name: '认证日期',
					value: '',
					placeholder: '',
					disabled: false
				}],
				info: {
					real_name: '',
					mobile: '',
					id_card: '',
					bank_card: '',
				},
				list: [{
					img: this.IMGLink + '/my/cardone.png',
					icon: this.IMGLink + '/my/right.png',
					text: '标准拍摄'
				}, {
					img: this.IMGLink + '/my/cardtwo.png',
					icon: this.IMGLink + '/my/error.png',
					text: '边框缺失'
				}, {
					img: this.IMGLink + '/my/cardthree.png',
					icon: this.IMGLink + '/my/error.png',
					text: '照片模糊'
				}, {
					img: this.IMGLink + '/my/cardfour.png',
					icon: this.IMGLink + '/my/error.png',
					text: '闪光强烈'
				}, ],
				card: {
					font: this.IMGLink + '/my/font.png',
					back: this.IMGLink + '/my/back.png',
				},
				infoFlag: false,
				indentifitionFlag: false,
				welcomeFlage: true,
				saveBtnText: '保存并上传',
				againShow: false
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		components: {
			welcome
		},
		methods: {
			onShow() {
				this.authenticationInfo();
			},
			closeBtn() {
				this.$refs.resultpop.close();
				this.goBack();
			},
			goBack() {
				copyFunc.goBack();
			},
			toEmit() {
				uni.navigateTo({
					url:'/pagesA/my/identification/index'
				})
			},
			async authenticationInfo() {
				const res = await authenticationInfo();
				if (res) {
					this.info = Object.assign(this.info, res.data)
					this.infoList[0].value = res.data.real_name;
					this.infoList[1].value = res.data.id_card;
					this.infoList[2].value = res.data.bank_card;
					this.infoList[3].value = res.data.create_date;
					res.data.auth_num == 1 ? this.againShow = true : this.againShow = false;
					this.infoList.map((i, j) => {
						i.disabled = true;
						return i;
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import './css/identification.css';

	.identification {
		color: #6A6A6A;
		font-size: 30rpx;
		line-height: 42rpx;

		.upload_idcard {
			border-top: 12rpx solid #F1F1F1;
			padding: 40rpx;

			.title {
				text-align: center;
				color: #5A5A5A;
				margin-bottom: 10rpx;
			}

			.phone_box {
				margin: 22rpx 0 40rpx 0;
				display: flex;

				image {
					width: 328rpx;
					margin-right: 8rpx;
				}
			}

			.require_boxs {
				margin: 22rpx 0 78rpx 0;
				display: flex;

				.item {
					width: 160rpx;
					margin-right: 8rpx;

					.img {
						width: 160rpx;
					}

					.icon {
						width: 20rpx;
						margin: 18rpx auto;
					}

					.text {
						font-size: 24rpx;
						text-align: center;
						line-height: 26rpx;
					}

				}
			}

			.save_btn {
				background: #990C10;
			}

			.nosave_btn {
				background: #818181;
			}
		}

		.info {
			padding: 40rpx 40rpx 0;
			font-size: 30rpx;
			color: #626262;

			.base_box {
				.rows {
					display: flex;
					border-bottom: 1px solid #f1f1f1;
					height: 112rpx;
					line-height: 116rpx;

					.name {
						width: 120rpx;
						margin-right: 88rpx;
					}

					.ipt {
						height: 116rpx;
					}

				}
			}
		}

		.result_box {
			width: 652rpx;
			height: 740rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.text {
				color: #343434;
				font-size: 66rpx;
				line-height: 68rpx;
				text-align: center;
				padding-top: 374rpx;
			}

			.result_btn {
				width: 530rpx;
				margin-top: 80rpx;
			}
		}

		.finish_box {
			padding: 40rpx;

			.tip {
				color: #626262;
				font-size: 26rpx;
				line-height: 36rpx;
			}

			.btn {
				margin-bottom: 30rpx;
			}
		}
	}
</style>

